 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   color: #c7bcba;
 }

 body {
   background: #f7f6ed;
   overflow: hidden;
 }

 .container {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
 }

 .con {
   width: 80%;
   margin: auto;
   padding-top: 120px;
   position: absolute;
   left: -100%;
   animation: anim3 2s forwards 2s;
 }

 @keyframes anim3 {
   form {
     left: -100%;
   }

   to {
     left: 10%;
   }
 }

 .con h1 {
   width: 50%;
   font-size: 90px;
   color: #d67208;
 }

 .line {
   width: 600px;
   height: 2px;
   background: #c7bcba;
   margin: 15px 0;
 }

 .con p {
   width: 48%;
   font-size: 24px;
   line-height: 1.5;
   font-weight: 200;
 }

 .con a {
   width: 270px;
   height: 60px;
   display: block;
   margin-top: 40px;
   font-size: 24px;
   text-decoration: none;
   font-weight: 200;
   text-align: center;
   line-height: 60px;
   background: #d67208;
   border-radius: 5px;
   color: #fff;
 }

 .robot {
   width: 691px;
   height: 810px;
   background: url(./打地鼠image/tu.png);
   background-size: cover;
   position: absolute;
   bottom: -100px;
   left: 30%;
   animation: anim 2s forwards, anim2 2.5s forwards 2.5s;
 }

 .robot::after {
   content: "";
   position: absolute;
   left: 0;
   width: 691px;
   height: 810px;
   background: url(./打地鼠image/tu.png);
   background-size: cover;
   z-index: -1;
 }
 a:hover{
  background-color: gray;
 }
 @keyframes anim {
   form {
     bottom: -100%;
   }

   to {
     bottom: 0%;
   }
 }

 @keyframes anim2 {
   form {
     left: 30%;
     width: 691px;
   }

   to {
     width: 0;
     left: 50%;
   }
 }